<template>
  <div>
    <h2>计算属性</h2>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>

    <h2>多次调用methods中的方法</h2>
    <p>{{ getUserName() }}</p>
    <p>{{ getUserName() }}</p>
    <p>{{ getUserName() }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      xing: '张',
      ming: '三'
    }
  },
  computed: {
    fullName () {
      console.log('调用了计算属性')
      return this.xing + this.ming
    }
  },
  methods: {
    getUserName() {
      console.log('调用了方法')
      return this.xing + this.ming
    }
  }
}
</script>

<style>

</style>